import React from 'react';
import './TeamOrderDetail.css'
import {withRouter} from 'react-router-dom'
import {Table} from 'antd'
import * as api from '../../../../utils/api'
import axios from '../../../../utils/http'
import {inject,observer} from 'mobx-react'
@inject('curOrder')
@observer
class TeamOrderDetail extends React.Component {
    constructor(){
        super()
        this.state={
            curTeamOrderData:{
                key: 1,
                teamOrderId:1,
                teamOrderNum: `2017051420170514`,
                teamStartTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                teamEndTime: new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                teamLeader: `杨雪`,
                teamSumPeople:6,
                quePeopleNum:4,
                teamState:'拼团成功',
                goodName:"新疆葡萄",
                goodComment:"口感冰脆甜，新鲜多汁，曾以28.6的甜度破过吉尼斯记录",
                teamAllPeople:[
                    {
                        key:0,
                        weiXinNiChen:"兔子先生",
                        buyerHeadImg:'http://img95.699pic.com/for_360_sitemap_imgs/004/01/49/55/83.png',
                        canTuanTime:new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                        orderNum:'201708156565644',
                        orderState:'已完成，已付款，收货确认'
                    },
                    {
                        key:1,
                        weiXinNiChen:"熊猫妹妹",
                        buyerHeadImg:'http://imgb13.photophoto.cn/20181127/xiongmaomeimei-31014940_3.jpg',
                        canTuanTime:new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                        orderNum:'201708156565644',
                        orderState:'已完成，已付款，收货确认'
                    },
                    {
                        key:2,
                        weiXinNiChen:"兔子先生",
                        buyerHeadImg:'http://img95.699pic.com/for_360_sitemap_imgs/004/01/49/55/83.png',
                        canTuanTime:new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                        orderNum:'201708156565644',
                        orderState:'已完成，已付款，收货确认'
                    },
                    {
                        key:3,
                        weiXinNiChen:"熊猫妹妹",
                        buyerHeadImg:'http://imgb13.photophoto.cn/20181127/xiongmaomeimei-31014940_3.jpg',
                        canTuanTime:new Date().toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,""),
                        orderNum:'201708156565644',
                        orderState:'已完成，已付款，收货确认'
                    },
                ]
            },
            columns:[
                {
                    title: '用户头像',
                    dataIndex: 'iapitdUa',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                <img src={record.iapitdUa} alt="" style={{width:'6rem',height:'6rem'}}/>
                            </div>
                        )
                    }
                },
                {
                    title: '用户昵称',
                    dataIndex: 'iapitdUn',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.iapitdUn}
                            </div>
                        )
                    }
                },
                {
                    title: '参团时间',
                    dataIndex: 'iapitdPt',
                    align:'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {new Date(record.iapitdPt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                },
                {
                    title: '订单编号',
                    dataIndex: 'iapitdOn',
                    align:'center',
                },
                {
                    title: '订单状态',
                    dataIndex: 'orderState',
                    align:'center',
                    render:(text,record,index)=>{
                        let orderShouHuoNum = record.iapitdOs
                        let orderFuKuanNum = record.iapitdPs
                        switch(orderShouHuoNum){
                            case 0: orderShouHuoNum = '未收货';break;
                            default: orderShouHuoNum = '已收货';break;
                        }
                        switch(orderFuKuanNum){
                            case 0: orderFuKuanNum = '未付款';break;
                            default: orderFuKuanNum = '已付款';break;
                        }
                        return(
                            <div>
                                {orderFuKuanNum} {orderShouHuoNum}
                            </div>
                        )
                    }
                },
            ],
            curTeamOrderDataArr:[{goods:{}}],
            curTeamCanTuanArr:[],
            bulkStatuNum:''
        }
    }
   async componentDidMount(){
        // 根据保存在mobx的teamOrderId向后台发起请求当前团购详情信息
        await this.getTeamDetail()
        await this.getTeamCanJiaPeople()
    }
    getTeamDetail = ()=>{
        let _this = this
        axios({
            url:api.GET_QUERYGROUPDETAILS,
            method:'GET',
            params:{
                bulk_id:_this.props.curOrder.curTeamId
            }
        }).then(data=>{
            // console.log(data.data.data)
            let curTeamOrderDataArr = data.data.data
            let bulkStatuNum = curTeamOrderDataArr[0].bulkStatus
            switch(bulkStatuNum){
                case 1:bulkStatuNum = "待付款";break;
                case 2:bulkStatuNum = "拼团中";break;
                case 3:bulkStatuNum = "拼团成功";break;
                case 4:bulkStatuNum = "拼团失败";break;
                case 5:bulkStatuNum = "拼团失败(待退款)";break;
                default:bulkStatuNum = "拼团失败(已退款)";
            }
            _this.setState({
                curTeamOrderDataArr,
                bulkStatuNum,
            })
        })
    }
    getTeamCanJiaPeople = ()=>{
        let _this = this
        axios({
            url:api.GET_QUERYGROUPJTL,
            method:'GET',
            params:{
                bulk_id:_this.props.curOrder.curTeamId
            }
        }).then(data=>{
            console.log(data)
            let curTeamCanTuanArr = data.data.data
            curTeamCanTuanArr = curTeamCanTuanArr.map((item,i)=>{
                item.key = i+1
                return item
            })
            _this.setState({
                curTeamCanTuanArr
            })
        })
    }
    huiDaoTeamList=()=>{
        // this.props.onChangeToTeamDetail()
        this.props.history.push('/Home/dingDan/Teamorderlist')
    }
    render(){
        return (
            <div className="teamOrderDetail">
                <h1>团购详情</h1>
                <h3>团购信息</h3>
                <div>
                    <ul>
                        <li>团购编号 : {this.state.curTeamOrderDataArr[0].bulkOid}</li>
                        <li>团购状态 : {this.state.bulkStatuNum}</li>
                        <li>购买用户 : {this.state.curTeamOrderDataArr[0].bulkUser}</li>
                        <li>开团时间 : {new Date(this.state.curTeamOrderDataArr[0].bulkBtime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</li>
                        <li>结束时间 : {new Date(this.state.curTeamOrderDataArr[0].bulkEtime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</li>
                    </ul>
                </div>

                <h3>商品信息</h3>
                <div>
                    商品名称  {this.state.curTeamOrderDataArr[0].goods.goodsName}:&nbsp;{this.state.curTeamOrderDataArr[0].goods.goodsRemarks}
                </div>

                <h3>参团信息</h3>
                <div className="tableScroll">
                    <div className="scrollbar">
                        {/* <Table columns={this.state.columns} dataSource={this.state.curTeamOrderData.teamAllPeople} pagination={false} rowClassName={this.getRowClassName}/> */}
                        <Table columns={this.state.columns} dataSource={this.state.curTeamCanTuanArr} pagination={false} rowClassName={this.getRowClassName}/>
                    </div>
                </div>
                <button type="button" className="copyBtn" onClick={this.huiDaoTeamList}>返回</button>
            </div>
        );
    }
}
export default withRouter(TeamOrderDetail);